import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  Button,
  Row,
  Col,
  message,
  Modal,
  Form,
  Checkbox,
  Input,
  InputNumber,
  Space,
} from 'antd';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import Resource from './resource';
import request from '@/utils/request';
import { WhseSelect, DeptSelect } from '@/components/FormItemSelect';
import ResGrpSelect from '@/components/ResGrpSelect';

const apiURL = '/api/services/app/ResourceGroup/';
const { confirm } = Modal;
const currentControl = 'Resource';
class ViewPage extends React.Component<any, any> {
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      record: { id: 0 },
    };
  }
  componentDidMount() { }
  formRef: any = React.createRef();
  fetchData = () => {
    request(apiURL + 'GetList', {
      method: 'GET'
    }).then((response: any) => {
      if (response && response.success) {
        var dataSource = response.result.items;
        this.setState({ dataSource });
      }
    });
  };
  onFinish = (values: any) => {
    var model = values.ResourceGroup;
    this.setState({ loading: true });
    var act = 'Modify';
    if (model.id == 0 || !model.id) {
      act = 'New';
    }
    model.calendarID = '0';
    model.opCode = '0';
    model.opStdID = '0';
    model.backflushEmpID = '0';
    model.resourceType = '0';

    request(apiURL + act, {
      method: 'POST',
      data: model
    }).then((response) => {
      if (response) {
        if (response.success) {
          if (response.result.success) {
            message.success('保存成功！');
            this.setState({ record: response.result.data });
          } else {
            message.error(response.result.message);
          }
        } else {
          message.error(response.error.message);
        }
        this.setState({ loading: false });
      }
    });
  };
  getData = (e: any) => {
    if (e.resourceGrpID) {
      request(apiURL + 'GetByCode', {
        method: 'GET',
        params: { code: e.resourceGrpID }
      }).then((response: any) => {
        if (response.success) {
          if (response.result.success) {
            this.formRef.current.setFieldsValue({ ResourceGroup: response.result.data });
            this.setState({ record: response.result.data });
          } else {
            message.warning(response.result.message);
          }
        }
      });
    }
  };
  resetForm = () => {
    this.formRef.current.resetFields();
    this.setState({ data: { id: 0 } });
  };
  switchModal = () => {
    const { visible } = this.state;
    this.setState({ visible: !visible });
  };
  delObj = () => {
    const { record } = this.state;
    let _this = this;
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '删除后将不可恢复，确定删除？',
      onOk() {
        _this.props
          .dispatch({
            type: 'Abp/delete',
            payload: { id: record.id },
            control: currentControl,
          })
          .then(() => {
            _this.resetForm();
          });
      },
    });
  };
  render() {
    const { record, visible } = this.state;
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <PageHeaderWrapper>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
              <Card
                title="资源群组"
                extra={[
                  <Space key="S1">
                    <Button type="primary" icon={<PlusOutlined />} onClick={this.resetForm}>
                      新增
                    </Button>
                    <Button type="primary" htmlType="submit">
                      保存
                    </Button>
                    <Button danger onClick={this.delObj} disabled={record.id === 0}>
                      删除
                    </Button>
                  </Space>,
                ]}
              >
                <Row gutter={[16, 16]}>
                  <Col span={12}>
                    <Form.Item label="ID" name={['ResourceGroup', 'id']} hidden>
                      <Input />
                    </Form.Item>
                    <Form.Item label="资源群组">
                      <Input.Group compact>
                        <ResGrpSelect
                          width={200}
                          noStyle
                          name={['ResourceGroup', 'resourceGrpID']}
                          rules={[{ required: true, message: '请输入群组名称' }]}
                          setCurrent={this.getData}
                        />
                      </Input.Group>
                    </Form.Item>
                    <Form.Item
                      label="描述"
                      name={['ResourceGroup', 'description']}
                      rules={[{ required: true }]}
                    >
                      <Input />
                    </Form.Item>
                    <DeptSelect
                      width={200}
                      showSearch
                      name={['ResourceGroup', 'jcDept']}
                      placeholder="请选择部门"
                      label="部门"
                    />
                    <Form.Item label="入料仓库" style={{ marginBottom: 0 }}>
                      <Input.Group compact>
                        <WhseSelect
                          width={200}
                          name={['ResourceGroup', 'inputWhse']}
                          placeholder="仓库"
                        />
                        <Form.Item name={['ResourceGroup', 'inputBinNum']}>
                          <Input style={{ width: 100 }} placeholder="库位" />
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                    <Form.Item label="出料仓库" style={{ marginBottom: 0 }}>
                      <Input.Group compact>
                        <WhseSelect
                          width={200}
                          name={['ResourceGroup', 'outputWhse']}
                          placeholder="仓库"
                        />
                        <Form.Item name={['ResourceGroup', 'outputBinNum']}>
                          <Input style={{ width: 100 }} placeholder="库位" />
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                    <Form.Item label="反冲仓库" style={{ marginBottom: 0 }}>
                      <Input.Group compact>
                        <WhseSelect
                          width={200}
                          name={['ResourceGroup', 'backflushWhse']}
                          placeholder="仓库"
                        />
                        <Form.Item name={['ResourceGroup', 'backflushBinNum']}>
                          <Input style={{ width: 100 }} placeholder="库位" />
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                      <Input.Group compact>
                        <Form.Item name={['ResourceGroup', 'inActive']} valuePropName="checked">
                          <Checkbox>无效</Checkbox>
                        </Form.Item>
                        <Form.Item name={['ResourceGroup', 'subContract']} valuePropName="checked">
                          <Checkbox>外包</Checkbox>
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>

                    <Form.Item label="排队时间" name={['ResourceGroup', 'queHours']}>
                      <InputNumber min={0} />
                    </Form.Item>
                    <Form.Item
                      label="人工费率"
                      name={['ResourceGroup', 'billLaborRate']}
                      rules={[{ required: true }]}
                    >
                      <InputNumber min={0.01} step={0.01} />
                    </Form.Item>
                    <Form.Item
                      label="日生产能力"
                      name={['ResourceGroup', 'dailyProdQty']}
                      rules={[{ required: true }]}
                    >
                      <InputNumber min={0} />
                    </Form.Item>
                    <Form.Item label="日生产率" name={['ResourceGroup', 'dailyProdRate']}>
                      <InputNumber min={0.01} step={0.01} />
                    </Form.Item>
                  </Col>
                </Row>
              </Card>
            </Form>
          </Col>
          <Col span={24}>
            <Resource ResourceGrp={record} />
          </Col>
        </Row>
        <Modal
          title="物料选择"
          visible={visible}
          destroyOnClose={true}
          onCancel={this.switchModal}
          footer={false}
        ></Modal>
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
